<template>
  <div class="activity-order-status">
    <span class="activity-order-status-dot" :style="{ backgroundColor: result.color }"></span>
    <span class="activity-order-status-text">{{ result.text }}</span>
  </div>
</template>

<script lang="ts" setup name="activityOrderStatus">
import { computed } from 'vue';
import dayjs from 'dayjs';
import { ActivityOrderStatusLabel, ActivityOrderStatus } from '/@/constants/activity-order-status';

const props = defineProps({
  status: {
    type: String,
    default: ''
  }
});

const result = computed(() => {
  const { status } = props;

  const text = ActivityOrderStatusLabel[status as string];
  let color = '';

  if (status === ActivityOrderStatus.UNPAY) {
    color = '#F56C6C';
  } else if (status === ActivityOrderStatus.CANCELED || status === ActivityOrderStatus.COMPLETED) {
    color = '#909399';
  } else if (status === ActivityOrderStatus.UN_WRITE_OFF) {
    color = '#E6A23C';
  } else {
    color = '#67C23A';
  }

  return { text, color };
});
</script>

<style lang="scss" scoped>
.activity-order-status {
  display: flex;
  align-items: center;

  &-dot {
    margin-right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
  }
}
</style>
